import React, { useState } from 'react'
import { Form, Input, Row, Col, Button, Select, DatePicker, ConfigProvider, Radio, Modal } from 'antd';
//中文语言包
import zhCN from 'antd/lib/locale/zh_CN';
//图标
import { PlusSquareFilled, SettingOutlined } from '@ant-design/icons';
import '../css/Newaftersalessearch2.css'
import SelfSeting from '../slefSeting'
import AddLinkman from '../jsx/AddLinkman'
import ButtonWarpCpn from '../../../components/CommBtn/CommBtn'

export default function Newaftersalessearch2(props) {
    const { isShow, pHandleOk, pHandleCancel, nowStatus } = props
    const [formLayout] = useState('horizontal');
    //文本输入框
    const { TextArea } = Input;
    //新增售后2弹窗隐藏和显示

    const handleOk = () => {
        // 根据当前状态传递不同的数据
        pHandleOk(false);
    };
    const handleCancel = () => {
        pHandleCancel(false);
    };
    const [changeHeiht2, setHeight2] = useState('contanier2') //显示隐藏高级收索变量
    //显示隐藏自定义设置
    function showSetingHeadle(e) {
        e.stopPropagation()
        console.log("showSeting");
        changeSeting2 === 'contanier2' ? setchangeSeting2('contanier1') : setchangeSeting2('contanier2')
    }
    // const [changeSeting, setchangeSeting] = useState('selfSeting2')//显示隐藏自定义设置变量
    const [changeSeting2, setchangeSeting2] = useState('selfSeting2')//显示隐藏自定义设置变量
    // 新增联系人
    const [addLinkman, setAddLinkman] = useState(false)
    // 新增联系人
    const changeLinkman = () => {
        setAddLinkman(true)
    }




    const config = {
        rules: [
            {
                type: 'object',
                required: true,
                message: 'Please select time!',
            },
        ],
    };

    const formItemLayout =
        formLayout === 'horizontal'
            ? {
                labelCol: {
                    span: 5,
                },
                wrapperCol: {
                    span: 13,
                },
            }
            : null;
    return (
        <div className='addAale-box'>
            {/* 新增联系人弹窗 */}
            <AddLinkman isShow={addLinkman} pOk={(res) => { setAddLinkman(res) }} pCancel={(res) => { setAddLinkman(res) }}></AddLinkman>
            <Modal
                className='addAale-box'
                visible={isShow}
                onOk={handleOk}
                onCancel={handleCancel}
                zIndex={0}
                footer={false}
            >
                <ConfigProvider locale={zhCN} >
                    <Form {...formItemLayout}
                        className='sale-box2'
                    >
                        {/* 弹框标题 */}
                        <div className='sales2-title'>新增售后【第二步:录入售后信息】</div>
                        {/* 表单内样式 */}
                        <Row justify='center' className='search-box2'>
                            <Col span={5}>
                                {/* 表单内标题 */}
                                <div className='sales2-title2'>新增售后信息</div>
                            </Col>
                            <Col span={19}></Col>
                            <Col span={4}></Col>

                            <Col span={20}>
                                <Form.Item label="客户名称" labelAlign={'right'} className='.col-box-item' >
                                    测试(编号2)
                                    <Button size='small' className='test-btn'>重选</Button>
                                </Form.Item>
                                <Form.Item label="相关商品" >
                                    <Row>
                                        <Col span={20}>
                                            <Input placeholder="" />
                                        </Col>
                                        <Col span={4}>
                                            <Button size='middle' className='test-btn2'>...</Button>
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item label="反馈主题"
                                    name="username" className='.col-box-item' {...config} rules={[
                                        {
                                            required: true,
                                            message: '请输入反馈主题!',
                                        },
                                    ]}>
                                    <Input placeholder="" />
                                </Form.Item>
                                <Form.Item label="售后分类" labelAlign={'right'} className='.col-box-item' >
                                    <Select placeholder="">
                                        <Select.Option value="请选择">请选择</Select.Option>
                                        <Select.Option value="产品质量">产品质量</Select.Option>
                                        <Select.Option value="操作问题">操作问题</Select.Option>
                                        <Select.Option value="其他问题">其他问题</Select.Option>
                                    </Select>
                                    <ButtonWarpCpn size='small' icon={<PlusSquareFilled />} className='select-button'  onClick={() => { changeLinkman() }}><span>新增</span></ButtonWarpCpn>
                                    {/* <ButtonWarpCpn bgcolor="#5cad69" >新增</ButtonWarpCpn> */}
                                </Form.Item>
                                <Form.Item label="联系人">
                                    <div className='contacts-box'>
                                        <Select placeholder="张三-13938693476"  >
                                            <Select.Option value="请选择">请选择</Select.Option>
                                            <Select.Option value="张三-13938693476">张三-13938693476</Select.Option>
                                        </Select>
                                        <Button size='small' className='select-button'><span>新增</span></Button>
                                    </div>
                                </Form.Item>
                                <Form.Item label="反馈时间" name="username"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入反馈时间!',
                                        },
                                    ]} >
                                    <DatePicker />
                                </Form.Item>
                                <Form.Item label="附件" labelAlign={'right'} className='.col-box-item' >
                                    <Button size='middle' type="primary" className='selectfil-btn'>选择文件</Button>
                                </Form.Item>
                                <Form.Item label="备注" labelAlign={'right'} className='.col-box-item' >
                                    <TextArea rows={4} className='textarea-box' />
                                </Form.Item>
                                <Form.Item label="售后状态">
                                    <Radio.Group name="radiogroup" defaultValue={1}>
                                        <Radio value={1}>有跟单</Radio>
                                        <Radio value={2}>有订单</Radio>
                                        <Radio value={3}>有合同</Radio>

                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item label="处理时间" labelAlign={'right'} className='.col-box-item' >
                                    <Input placeholder="" />
                                </Form.Item>
                                <Form.Item label="处理结果" labelAlign={'right'} className='.col-box-item' >
                                    <TextArea rows={4} className='textarea-box' />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24} className='btn-box'>
                                <Button className='btn2-box1' size='middle' htmlType="submit">保存</Button>
                                <Button className='btn2-box2' size='middle'>关闭</Button>
                                <Button className='btn2-box3' size='small' icon={<SettingOutlined />} onClick={showSetingHeadle}>自定义设置</Button>
                            </Col>

                        </Row>
                        <section className={changeSeting2}>
                            <SelfSeting changeSeting2={showSetingHeadle} />
                        </section>
                    </Form>
                </ConfigProvider>
            </Modal>


        </div >
    )
}

